﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网上商城</title>
<link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/css/product.css" rel="stylesheet" type="text/css">
<style type="text/css">
		.comment-list{
			width: 700px;
			margin: 20px auto;
			clear: both;
			padding-top: 20px;
		}
		.comment-list .comment-info{
			position: relative;
			margin-bottom: 20px;
			margin-bottom: 20px;
			border-bottom: 1px solid #ccc;
		}
		.comment-list .comment-info header{
			width: 10%;
			position: absolute;
		}
		.comment-list .comment-info header img{
			width: 100%;
			border-radius: 50%;
			padding: 5px;
		}
		.comment-list .comment-info .comment-right{
			padding:5px 0px 5px 0px;
		}
		.comment-list .comment-info .comment-right h3{
			margin: 5px 0px;
		}
		.comment-list .comment-info .comment-right .comment-content-header{
			height: 25px;
		}
		.comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{
			padding-right: 2em;
			color: #aaa;
		}
		.comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
			cursor: pointer;
		}
		.comment-list .comment-info .comment-right .reply-list {
			border-left: 3px solid #ccc;
			padding-left: 7px;
		}
		.comment-list .comment-info .comment-right .reply-list .reply{
			border-bottom: 1px dashed #ccc;
		}
		.comment-list .comment-info .comment-right .reply-list .reply div span{
			padding-left: 10px;
		}
		.comment-list .comment-info .comment-right .reply-list .reply p span{
			padding-right: 2em;
			color: #aaa;
		}
	</style>

</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="container productContent">
		<div class="span6" style="display: inline-block;width: 200px;">
			<div class="hotProductCategory">
						<dl>
							<c:forEach items="${sessionScope.cateCS}" var="cs">
								<dd>
									<a href="/findByCid?cid=${cs.csid}&page=1">${cs.csname}</a>
								</dd>
							</c:forEach>
						</dl>
			</div>
		</div>
		<div class="span18 last">
			
			<div class="productImage">
					<a title="" style="outline-style: none; text-decoration: none;" id="zoom" href="http://image/r___________renleipic_01/bigPic1ea8f1c9-8b8e-4262-8ca9-690912434692.jpg" rel="gallery">
						<div class="zoomPad"><a href="${requestScope.p.image}" class="MagicZoom" id="MagicZoom"><img style="opacity: 1;" title="" class="medium" src="${requestScope.p.image}"></a> <div style="display: block; top: 0px; left: 162px; width: 0px; height: 0px; position: absolute; border-width: 1px;" class="zoomPup"></div><div style="position: absolute; z-index: 5001; left: 312px; top: 0px; display: block;" class="zoomWindow"><div style="width: 368px;" class="zoomWrapper"><div style="width: 100%; position: absolute; display: none;" class="zoomWrapperTitle"></div><div style="width: 0%; height: 0px;" class="zoomWrapperImage"><img src="%E5%B0%9A%E9%83%BD%E6%AF%94%E6%8B%89%E5%A5%B3%E8%A3%852013%E5%A4%8F%E8%A3%85%E6%96%B0%E6%AC%BE%E8%95%BE%E4%B8%9D%E8%BF%9E%E8%A1%A3%E8%A3%99%20%E9%9F%A9%E7%89%88%E4%BF%AE%E8%BA%AB%E9%9B%AA%E7%BA%BA%E6%89%93%E5%BA%95%E8%A3%99%E5%AD%90%20%E6%98%A5%E6%AC%BE%20-%20Powered%20By%20Mango%20Team_files/6d53c211-2325-41ed-8696-d8fbceb1c199-large.jpg" style="position: absolute; border: 0px none; display: block; left: -432px; top: 0px;"></div></div></div><div style="visibility: hidden; top: 129.5px; left: 106px; position: absolute;" class="zoomPreload">Loading zoom</div></div>
					</a>
				
			</div>
			<div class="name">${requestScope.p.pname}</div>
			<div class="sn">
				<div>编号：${requestScope.p.pid}</div>
			</div>
			<div class="info">
				<dl>
					<dt>商城价:</dt>
					<dd>
						<strong>￥：${requestScope.p.shop_price}元/份</strong>
							参 考 价：
							<del>￥${requestScope.p.market_price}元/份</del>
					</dd>
				</dl>
					<dl>
						<dt>促销:</dt>
						<dd>
								<a target="_blank" title="限时抢购 (2014-07-30 ~ 2015-01-01)">限时抢购</a>
						</dd>
					</dl>
					<dl>
						<dt>    </dt>
						<dd>
							<span>    </span>
						</dd>
					</dl>
			</div>
			<form id="cartForm" method="post" action="/saveCart" >
				<div class="action">
					<input type="hidden" name="pid" value="${requestScope.p.pid}"/>
						<dl class="quantity">
							<dt>购买数量:</dt>
							<dd>
								<input id="count" name="count" value="1" maxlength="4" onpaste="return false;" type="text">
								<div>
									<span id="increase" class="increase">&nbsp;</span>
									<span id="decrease" class="decrease">&nbsp;</span>
								</div>
							</dd>
							<dd>
								件
							</dd>
						</dl>
					<div class="buy">
							<input id="addCart" class="addCart" value="加入购物车" type="button" onclick="saveCart()">
					</div>
				</div>
			</form>
			<div id="bar" class="bar">
				<ul>
						<li id="introductionTab">
							<a href="#introduction">商品介绍</a>
						</li>
						
				</ul>
			</div>
				
			<div id="introduction" name="introduction" class="introduction">
				<div class="title">
					<strong>${requestScope.p.pdesc}</strong>
				</div>
				<div>
					<img style="width: 100%;" src="${requestScope.p.image}">
				</div>
			</div>
			<%--商品评论--%>
			<div class="ck">
				<button>查看评论</button>
			</div>
			<div class="comment-list">
			</div>
		</div>
	</div>
<div class="container footer">
	<div class="span24">
		<div class="footerAd">
					<img src="image\r___________renleipic_01/footer.jpg" alt="我们的优势" title="我们的优势" height="52" width="950">
</div>
</div>
	<div class="span24">
		<ul class="bottomNav">
					<li>
						<a href="#">关于我们</a>
						|
					</li>
					<li>
						<a href="#">联系我们</a>
						|
					</li>
					<li>
						<a href="#">诚聘英才</a>
						|
					</li>
					<li>
						<a href="#">法律声明</a>
						|
					</li>
					<li>
						<a>友情链接</a>
						|
					</li>
					<li>
						<a target="_blank">支付方式</a>
						|
					</li>
					<li>
						<a target="_blank">配送方式</a>
						|
					</li>
					<li>
						<a >SHOP++官网</a>
						|
					</li>
					<li>
						<a>SHOP++论坛</a>
						
					</li>
		</ul>
	</div>
	<div class="span24">
		<div class="copyright">Copyright © 2005-2015 网上商城 版权所有</div>
	</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/MagicZoom.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.comment.js"></script>
<script type="text/javascript">
    function saveCart() {
        document.getElementById("cartForm").submit();
    }
    $(function(){
        $("#cartForm #increase").on("click",function () {
            var $count = Number($("#cartForm #count").val());
            $("#cartForm #count").val($count+1);
        });
        $("#cartForm #decrease").on("click",function () {
            var $count = Number($("#cartForm #count").val());
            if($count>1){
                $("#cartForm #count").val($count-1);
            }
        });

        /*加载评论*/
        $(".ck>button").on('click',function () {
            listPL();
        });
    })

    function listPL() {
        var $pid = $("#cartForm input[type='hidden']").val();
        console.log('加载评论'+$pid);
        $.ajax({
			type:'POST',
			url:'/getAllPL',
			data:JSON.stringify({pid:$pid}),
			dataType:'json',
			contentType:'application/json;charset=utf-8',
			success:function (msg) {
				console.log(msg);
				if (msg.length>0)
					addPL(msg);
				else
                    $(".comment-list").innerHTML = "还没有评价.";
            }
		});
        /*var arr = [
            {id:1,img:'',replyName:"帅大叔",beReplyName:"匿名",content:"阿萨大大地发呆分撒发生的地打法都是放单方方，阿萨德发大水，打法是否定的，打死打伤打死打伤打死打伤发声法大法师",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[]}
        ];*/

    }
    function addPL(msg) {
        for(var i=0;i<msg.length;i++){
            var arr = [
                {id:i+1,img:'',replyName:"",beReplyName:"匿名",content:msg[i].evaluation,time:"2017-10-17 11:42:53",address:"XX",osname:"",browse:"谷歌",replyBody:[{id:"",img:"",beReplyName:"",content:msg[i].huifu,time:"",address:"",osname:"",browse:""}]}
            ];
		}
        $(".comment-list").addCommentList({data:arr,add:""});
    }
</script>
</body>
</html>